<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div v-if="stepInfo.length" class="flowSteps" :class="cardsLen ? 'radius': ''">
    <div class="in">
    <template v-for="(item, i) in stepInfo">
      <Item v-if="isShow(i)"
      :key="i"
      :title="item.taskName" :isFirst="i === 0" :more1="isMore1(i)" :more2="isMore2(i)"
      :time="item.endTime"
      :desc="item.assigneeName"
      :nodeType="nodeTypeView(item, i)" />
    </template>
    <Item
    :nodeType="lastStep && lastStep.endTime === '' ? '': 'done'"
    desc="完成" isEnd />
    </div>
  </div>
</template>
<script>
import Item from './Item.vue'
import request from '@/framework-core/axios';
import website  from '@/framework-core/config/website';
export default {
  props: {
    processInstanceId: {
      type: String,
      default: ''
    },
    cardsLen: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Item
  },
  mounted() {
    this.getAuditDetail()
  },
  data() {
    return {
      stepInfo: [],
      firstEndTimeNullIndex: 0
    }
  },
  computed: {
    lastStep() {
      const len = this.stepInfo.length
      if (len) {
        return this.stepInfo[len - 1]
      }
      return null
    }
  },
  methods: {
    nodeTypeView(item, i) {
      let str = ''
      if (item.endTime !== '') {
        str = 'done'
      } else if (item.endTime === '' && i === this.firstEndTimeNullIndex) {
        str = 'todo'
      }
      return str
    },
    isShow(i) {
      const len = this.stepInfo.length
      if (i === 0 || i + 6 > len) {
        return true
      }
      return false
    },
    isMore1(i) {
      if (this.stepInfo.length > 6 && i === 0) {
        return true
      }
      return false
    },
    isMore2(i) {
      const len = this.stepInfo.length
      if (len > 6 && i === len - 5) {
        return true
      }
      return false
    },
    getAuditDetail() {
      request.get(website+'/flow-info/detail', {
        params: {
          'processInstanceId': this.processInstanceId,
          'showFirstModifyRecord': false,
          'showRepotModifyRecord': false,
          'signMerge': true // 会签是否合并
        }
      }).then(response => {
        const result = response.data
        this.stepInfo = result
        this.firstEndTimeNullIndex = this.findEndTimeIndex(this.stepInfo)
      }).catch(error => {
        this.$message.error(error.msg || error.message)
      })
    },
    findEndTimeIndex(result) {
      let index = 0
      if (result?.length) {
        for (let i = 0; i < result.length; i++) {
          const item = result[i]
          if (item.endTime === '') {
            index = i
            break
          }
        }
      }
      return index
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin itemPosition {
  content: '';
  position: absolute;
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
}
$def: #cececd;
.radius {
  border-radius: 7px;
}
.flowSteps {
  width: 100%;
  overflow: hidden;
  background-color: #FFF;
  margin-bottom: 10px;
  overflow: hidden;
  .in {
    display: flex;
    position: relative;
    padding: 20px 0;
    float: left;
  }

  .in::after {
  @include itemPosition;
  border-top: 3px dotted $def;
}
}
</style>
